<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
  <ul>
    <!--绑定key ,实际对数组操作时，会提高很大的性能，绑定的值一定要是item，不然没吊用-->
    <li v-for="item in letters" :key="item">{{item}}</li>
  </ul>
  <button @click=""></button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ["A","B","c","d","E"]

    },
    methods:{
      btnClick(){
        //1.push方法
        this.letters.push("abc","cbd","aasa")
        this.letters.push("abc")

        //2.pop() ：删除数组中最后一个元素
        this.letters.pop();

        //3.shift():删除数组第一个元素
        this.letters.shift();

        //4.unShift() :在数组的最前面添加元素
        this.letters.unshift("asc","123","qwe");

        //splice作用：删除元素\插入元素\替换元素，第一个参数是从那个元素开始操作
        //删除元素：第二个参数是准备删除的几个元素（如果没有传，就代表一直删到底）
        //替换元素： this.letters.splice(2,3,"a","b","c") 后面的参数就是替换的元素
        //插入元素：this.letters.splice(2,0,"a","b","c")第二个参数是0，代表一个都不删，然后把后面的参数插进去
        //splice(start)
        //this.letters.splice()

        this.letters.sort();

        this.letters.reverse();

        //这个不是响应式的，千万要注意
        this.letters[o]='bbb'
        //这种方式也是响应式的，vue自带的函数
        Vue.set(this.letters,0,"bbbb")
      }
    }
  })
</script>
</body>
</html>